<template>
  <div>
    <div class="classify" v-if="switchState">
      <img :src="imgInfo.imgUrl" alt="" class="classifyImg">
      <span class="classify_text">{{imgInfo.value}}</span>
      <span class="classify_describe">{{imgInfo.text}}</span>
      <ul class="right" @click="switchState = !switchState"> <!--颜色小图标-->
        <li class="diamond" :style="diamondColor(index)" v-for="index in 7"></li>
        <li class="triangle"></li>
      </ul>
    </div>

    <div class="classifyChoose" v-if="!switchState">
      <ul>
        <div class="triangle_div" @click="switchState = !switchState">
          <li class="triangle"></li>
        </div>
        <li v-for="(img,index) in imgs" class="left img">
          <img class="classifyImg" :src="img.imgUrl" alt=""
               @click="getImg(img.imgUrl,img.text,textInfo[index].dictId,textInfo[index].dictValue)">
          <p class="imgText">{{textInfo[index].dictValue}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import getData2 from 'src/service/getData2'

  export default {
    props: {
      imgs: {
        type: Array,
        default: () => []
      }
    },
    data: () => ({
      switchState: true,
      textInfo: [],
      imgInfo: {}
    }),
    watch: {
      imgInfo(value) {
        this.$emit('getDictInfo', value)
      }
    },
    methods: {
      diamondColor(index) {
        switch (index) {
          case 1:
            return 'background-color:#fe6074';
            break;
          case 2:
            return 'background-color:#fa5c52';
            break;
          case 3:
            return 'background-color:#c471ff';
            break;
          case 4:
            return 'background-color:#57c0ff';
            break;
          case 5:
            return 'background-color:#fb4695';
            break;
          case 6:
            return 'background-color:#3ed5c1';
            break;
          case 7:
            return 'background-color:#ff6378';
            break;
        }
      },
      getImg(imgUrl, text, dict, value) {
        this.switchState = true; // 切换状态
        this.imgInfo = {imgUrl, value, dict, text}; // 赋值，包含dict信息
      },
      closeState() {
        this.switchState = true
      }
    },
    async created() {
      let type = await getData2.newFindType()
      this.textInfo = type.content.info;
      let getDict = this.textInfo.find(data => data.dictId == this.$route.query.dictId); // 查找dictId对应的对象
      if (Object.keys(getDict).length) { // 判断对象是否为空
        let getNum;
        let getDict2 = this.textInfo.find((data, num) => { // 查找dictId相等的对象并返回
          if (data.dictId == getDict.dictId) {
            getNum = num; // 赋值数组的下标值
            return data
          }
        });
        if (Object.keys(getDict2).length) {
          this.imgInfo = {
            dict: getDict2.dictId,
            imgUrl: this.imgs[getNum].imgUrl,
            value: getDict2.dictValue,
            text: this.imgs[getNum].text
          };
        }
      }
    },
    mounted() {

    }
  }
</script>

<style lang="scss" scoped="">
  li.triangle {
    float: left;
    margin-top: 0.3rem;
    margin-left: 0.1rem;
    width: 0;
    height: 0;
    border-width: 0.42rem;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }

  img.classifyImg {
    width: 3.43em;
    height: 3.43em;
    vertical-align: middle;
  }

  div.classify {
    padding: 1.15rem;
    background-color: #ffffff;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    span.classify_text {
      position: absolute;
      margin-top: 0.3rem;
      font-size: 1.5rem;
      margin-left: 0.3rem;
      font-weight: 600;
      color: rgb(74, 74, 74);
    }
    span.classify_describe {
      vertical-align: bottom;
      margin-left: 0.5rem;
      font-size: 0.85rem;
      color: rgb(102, 102, 102);
    }
    ul {
      width: 4.1rem;
      margin-top: 0.84rem;
      > li.diamond {
        float: left;
        margin-right: 2px;
        margin-bottom: 2px;
        width: 0.86rem;
        height: 0.86rem;
        background-color: red;
        border-radius: 4px;
      }
    }

  }

  div.classifyChoose {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border: 1px solid #dddddd;
    height: 14.35rem;
    .imgText {
      margin-top: 0.5rem;
      text-align: center;
    }
    div.triangle_div {
      height: 1rem;
    }
    li.triangle {
      position: absolute;
      left: 50%;
      border-color: transparent transparent black transparent;
    }
    li.img.left {
      width: 25%;
      text-align: center;
      margin-top: 1.15rem;
    }
  }
</style>